<template>
  <div>
    <el-dialog
      :visible="dialogVisible"
      :show-close="false"
      @close="handleClose"
      top="5vh"
      :close-on-click-modal="
        getUserInfo().merchantInfoComplete == 'have_complete'
      "
      :close-on-press-escape="
        getUserInfo().merchantInfoComplete == 'have_complete'
      "
      width="80%"
    >
      <div class="wrap">
        <div class="left" style="font-size: 12px">
          <div v-if="pageNum === 1">
            <div class="first">
              <div class="s_title">公司信息</div>
              <div>公司基本信息将用于认证账户，信息完全保</div>
              <div>密，信息提交后2个工作日内完成审核。</div>
            </div>
            <div class="second">
              <div class="s_title">注册地址</div>
              <div>请填写营业执照上的注册地址。</div>
            </div>
            <div>
              <div class="s_title">上传照片</div>
              <div>上传图片必须为彩色无水印、PNG 或</div>
              <div>JPG 格式、大小在2MB 以内。</div>
            </div>
          </div>
          <div v-else>
            <div class="fourth">
              <div class="s_title">法人信息</div>
              <div>法人信息将用于认证账户，信息完全保</div>
              <div>密，请保持与营业执照一致。</div>
            </div>
            <div>
              <div class="s_title">联系人信息</div>
              <div>购买软件联系人，也是本软件后台超级管</div>
              <div>理员，信息不可变更。</div>
            </div>
          </div>
        </div>
        <div class="right">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="createForm"
            label-width="130px"
          >
            <div v-show="pageNum === 1">
              <h1 class="title">请完善公司信息</h1>
              <div class="hint">
                请完善公司基本信息，提交成功后会有工作人员审核开通，审核通过后方可使用。
              </div>
              <div class="s_hint">法人/联系人信息</div>
              <div class="line">
                <div></div>
                <div></div>
              </div>
              <el-form-item label="公司类型" prop="memberType">
                <el-radio-group v-model="ruleForm.memberType">
                  <el-radio
                    v-for="item of companyTypeList"
                    :key="item.id"
                    :label="item.dictValue"
                    >{{ item.dictLabel }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
              <el-form-item label="公司全称" prop="memberName" class="input_">
                <el-input
                  v-model="ruleForm.memberName"
                  placeholder="请输入公司全称"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="公司简称"
                prop="memberShortName"
                class="input_"
              >
                <el-input
                  v-model="ruleForm.memberShortName"
                  placeholder="请输入公司简称"
                ></el-input>
              </el-form-item>
              <el-form-item label="经营范围" class="is-required">
                <div style="display: flex; margin-bottom: -20px">
                  <el-form-item
                    label-width="0"
                    style="margin-right: 15px"
                    prop="category_1"
                  >
                    <el-select
                      v-model="ruleForm.category_1"
                      placeholder="请选择一级经营范围"
                      @change="handleCategory"
                      style="width: 248px"
                    >
                      <el-option
                        v-for="item of categoryList1"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label-width="0" prop="category_2">
                    <el-select
                      v-model="ruleForm.category_2"
                      placeholder="请选择二级经营范围"
                      @change="handleCategory1"
                      style="width: 249px"
                    >
                      <el-option
                        v-for="item of categoryList2"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-form-item>
              <el-form-item label="所在地" class="is-required">
                <div style="display: flex; margin-bottom: -20px">
                  <el-form-item label-width="0" prop="provCode">
                    <el-select
                      v-model="ruleForm.provCode"
                      placeholder="请选择省"
                      @change="handleProv"
                      style="width: 160px"
                    >
                      <el-option
                        v-for="item of provList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.areaCode"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label-width="0"
                    prop="cityCode"
                    style="margin: 0 15px"
                  >
                    <el-select
                      v-model="ruleForm.cityCode"
                      placeholder="请选择市"
                      @change="handleCity"
                      style="width: 160px"
                    >
                      <el-option
                        v-for="item of cityList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.areaCode"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label-width="0" prop="areaCode">
                    <el-select
                      v-model="ruleForm.areaCode"
                      placeholder="请选择区"
                      style="width: 162px"
                      @change="handleArea"
                    >
                      <el-option
                        v-for="item of areaList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.areaCode"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-form-item>
              <el-form-item
                label="注册地址"
                prop="registerAddress"
                class="input_"
              >
                <el-input
                  v-model="ruleForm.registerAddress"
                  placeholder="请输入注册地址"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系地址" prop="address" class="input_">
                <el-input
                  v-model="ruleForm.address"
                  placeholder="请输入联系地址"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="营业执照编码"
                prop="businessCode"
                class="input_"
                style="margin-top: 90px"
              >
                <el-input
                  v-model="ruleForm.businessCode"
                  placeholder="请输入营业执照编码"
                ></el-input>
              </el-form-item>
              <el-form-item label="有效日期" prop="businessDate">
                <el-date-picker
                  v-model="ruleForm.businessDate"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  style="width: 370px"
                  unlink-panels
                  :disabled="ruleForm.businessIsLong"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
                <el-checkbox
                  v-model="ruleForm.businessIsLong"
                  :disabled="!ruleForm.businessDate"
                  @change="(val) => longDateChange(val, 'businessDate')"
                  style="margin-left: 40px"
                  >长期有效</el-checkbox
                >
              </el-form-item>
              <el-form-item label="上传营业执照" prop="businessLicensePhoto">
                <el-upload
                  drag
                  action="/merchantApi/oss/upload"
                  accept=".png,.jpg,.jpeg"
                  :limit="2"
                  :headers="{
                    auth_token: getToken(),
                    auth_tmp: curTmp,
                    auth_tck: curTck,
                  }"
                  list-type="picture"
                  :file-list="businessLicensePhoto"
                  :before-upload="beforeUpload"
                  :on-remove="
                    (file) => handleRemove(file, 'businessLicensePhoto')
                  "
                  :on-success="
                    (res, file) =>
                      handleSuccess(res, file, 'businessLicensePhoto')
                  "
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text2">
                    单击或将文件拖到该区域以上传
                  </div>
                  <div class="el-upload__tip2">
                    支持 PNG或JPG，最大不可超过2M
                  </div>
                </el-upload>
              </el-form-item>
            </div>
            <div
              v-show="pageNum === 2"
              :class="[
                pageNum === 2 ? 'animate__animated animate__fadeIn' : '',
              ]"
            >
              <div class="title" style="margin-bottom: 30px">
                法人及联系人信息
              </div>
              <div class="line">
                <div></div>
              </div>
              <el-form-item label="法人姓名" prop="legalPerson" class="input_">
                <el-input
                  v-model="ruleForm.legalPerson"
                  maxlength="10"
                  placeholder="请输入法人姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="证件信息" prop="legalCertType">
                <el-select
                  v-model="ruleForm.legalCertType"
                  style="width: 160px; margin-right: 16px"
                  placeholder="请选择证件信息"
                  @change="clearId"
                >
                  <el-option
                    v-for="item of legalCertTypeList"
                    :key="item.id"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
                <el-form-item prop="legalCertId" style="display: inline-block">
                  <el-input
                    v-model="ruleForm.legalCertId"
                    :maxlength="
                      ruleForm.legalCertType == '1'
                        ? 18
                        : ruleForm.legalCertType == '2'
                        ? 9
                        : 10
                    "
                    style="width: 336px"
                    placeholder="请输入证件号码"
                  ></el-input>
                </el-form-item>
              </el-form-item>
              <el-form-item label="有效日期" prop="legalCertDate">
                <el-date-picker
                  v-model="ruleForm.legalCertDate"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  style="width: 370px"
                  unlink-panels
                  :disabled="ruleForm.legalCertIdLong"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
                <el-checkbox
                  v-model="ruleForm.legalCertIdLong"
                  :disabled="!ruleForm.legalCertDate"
                  @change="(val) => longDateChange(val, 'legalCertDate')"
                  style="margin-left: 40px"
                  >长期有效</el-checkbox
                >
              </el-form-item>
              <el-form-item label="手机号" prop="legalTel" class="input_">
                <el-input
                  v-model="ruleForm.legalTel"
                  maxlength="11"
                  placeholder="请输入法人手机号"
                ></el-input>
              </el-form-item>
              <el-row :gutter="40">
                <el-col :span="12">
                  <el-form-item label="法人身份证正面" prop="cardPhotoPositive">
                    <el-upload
                      class="upload2"
                      drag
                      accept=".png,.jpg,.jpeg"
                      action="/merchantApi/oss/upload"
                      :before-upload="beforeUpload"
                      :limit="2"
                      :headers="{
                        auth_token: getToken(),
                        auth_tmp: curTmp,
                        auth_tck: curTck,
                      }"
                      list-type="picture"
                      :file-list="cardPhotoPositive"
                      :on-remove="
                        (file) => handleRemove(file, 'cardPhotoPositive')
                      "
                      :on-success="
                        (res, file) =>
                          handleSuccess(res, file, 'cardPhotoPositive')
                      "
                    >
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text2">
                        单击或将文件拖到该区域以上传
                      </div>
                      <div class="el-upload__tip2">
                        支持 PNG或JPG，最大不可超过2M
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="法人身份证反面" prop="cardPhotoNegative">
                    <el-upload
                      class="upload2"
                      drag
                      action="/merchantApi/oss/upload"
                      :limit="2"
                      :headers="{
                        auth_token: getToken(),
                        auth_tmp: curTmp,
                        auth_tck: curTck,
                      }"
                      accept=".png,.jpg,.jpeg"
                      :before-upload="beforeUpload"
                      list-type="picture"
                      :file-list="cardPhotoNegative"
                      :on-remove="
                        (file) => handleRemove(file, 'cardPhotoNegative')
                      "
                      :on-success="
                        (res, file) =>
                          handleSuccess(res, file, 'cardPhotoNegative')
                      "
                    >
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text2">
                        单击或将文件拖到该区域以上传
                      </div>
                      <div class="el-upload__tip2">
                        支持 PNG或JPG，最大不可超过2M
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item
                label="联系人"
                prop="memberContact"
                class="input_"
                style="margin-top: 60px"
              >
                <el-input
                  v-model="ruleForm.memberContact"
                  placeholder="请输入联系人"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="联系电话"
                prop="memberContactTel"
                class="input_"
              >
                <el-input
                  v-model="ruleForm.memberContactTel"
                  maxlength="11"
                  placeholder="请输入联系电话"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="contactEmail" class="input_">
                <el-input
                  v-model="ruleForm.contactEmail"
                  maxlength="64"
                  placeholder="请输入邮箱"
                ></el-input>
              </el-form-item>
            </div>
            <el-form-item>
              <div v-if="pageNum === 2" style="display: flex">
                <el-button
                  style="
                    width: 254px;
                    height: 46px;
                    margin-right: 40px;
                    margin-top: 50px;
                    border-radius: 10px;
                  "
                  @click="upFn('createForm')"
                  >上一步</el-button
                >
                <div class="submit" @click="handleFinish('createForm')">
                  提交
                </div>
              </div>
              <div class="submit" v-else @click="nextFn('createForm')">
                下一步
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  isEmail,
  isMobile,
  isIdCard,
  isCompanyName,
  isPerson,
} from "@/utils/validate";
import { getToken, getUserInfo, setUserInfo } from "@/utils/public";
import crypto from "@/crypto";
import { randomWord } from "@/utils/getRandom";

export default {
  data() {
    const testComName = (rule, value, callback) => {
      if (isCompanyName(value)) {
        callback();
      } else {
        callback(new Error("格式有误"));
      }
    };

    return {
      curTmp: null,
      curTck: null,
      len: [8, 9, 10, 11, 12][
        Math.floor(Math.random() * [8, 9, 10, 11, 12].length)
      ],
      pageNum: 1,
      businessLicensePhoto: [], // 营业执照
      cardPhotoPositive: [], // 法人证件正面
      cardPhotoNegative: [], // 法人证件反面
      avatar: [], // 头像
      categoryList1: [], // 一级经营范围
      categoryList2: [], // 二级经营范围
      provList: [], // 省
      cityList: [], // 市
      areaList: [
        {
          id: "31511",
          name: "平阳县",
          areaCode: "330326",
          parentCode: "330300",
          level: 3,
        },
      ], // 区
      companyTypeList: [], // 商户类型
      legalCertTypeList: [], // 法人证件类型
      ruleForm: {
        // legalCertId: "",
      },
      rules: {
        memberType: [
          { required: true, message: "请选择公司类型", trigger: "change" },
        ],
        memberName: [
          { required: true, message: "请输入公司名称", trigger: "change" },
          { max: 60, message: "最大长度60字符", trigger: "change" },
          {
            validator: testComName,
            trigger: "change",
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        memberShortName: [
          { required: true, message: "请输入公司简称", trigger: "change" },
          { max: 30, message: "最大长度30字符", trigger: "change" },
          {
            validator: testComName,
            trigger: "change",
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        category_1: [
          { required: true, message: "请选择经营范围", trigger: "change" },
        ],
        category_2: [
          { required: true, message: "请选择经营范围", trigger: "change" },
        ],
        registerAddress: [
          { required: true, message: "请输入注册地址", trigger: "change" },
          { max: 60, message: "最大长度60字符", trigger: "change" },
          {
            validator: testComName,
            trigger: "change",
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        address: [
          { required: true, message: "请输入联系地址", trigger: "change" },
          { max: 60, message: "最大长度60字符", trigger: "change" },
          {
            validator: testComName,
            trigger: "change",
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        provCode: [
          { required: true, message: "请选择所在省份", trigger: "change" },
        ],
        cityCode: [
          { required: false, message: "请选择所在市区", trigger: "change" },
        ],
        areaCode: [
          { required: false, message: "请选择所在地区", trigger: "change" },
        ],
        businessCode: [
          { required: true, message: "请输入营业执照编码", trigger: "change" },
          { max: 45, message: "最大长度45字符", trigger: "change" },
          {
            validator: testComName,
            trigger: "change",
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        businessDate: [
          {
            required: true,
            message: "请选择营业执照有效期",
            trigger: "change",
          },
        ],
        businessLicensePhoto: [{ required: true, validator: this.checkFile }],
      },
    };
  },
  props: ["dialogVisible", "info"],
  created() {
    // this.$emit("changeInfo1");
    this.curTmp = new Date().getTime();
    this.curTck = crypto.set(
      getToken() + "_" + this.curTmp + "_" + randomWord(this.len),
      "a1g0qoalvv19aed3"
    );

    this.ruleForm = JSON.parse(JSON.stringify(this.info));
    if (Object.keys(this.ruleForm).length) {
      // if (!this.ruleForm.businessIsLong) {
      this.$set(this.ruleForm, "businessDate", [
        this.ruleForm.businessStartDate,
        this.ruleForm.businessExpires,
      ]);
      // }

      // if (!this.ruleForm.legalCertIdLong) {
      this.$set(this.ruleForm, "legalCertDate", [
        this.ruleForm.legalCertIdStart,
        this.ruleForm.legalCertIdExpires,
      ]);
      // }
      if (this.ruleForm.provCode) {
        this.getCityList(this.ruleForm.provCode, "cityList");
      }
      if (this.ruleForm.cityCode) {
        this.getCityList(this.ruleForm.cityCode, "areaList");
      }
      if (this.ruleForm.businessScope) {
        const arr = this.ruleForm.businessScope.split(",");
        this.getSecondCate(arr[0]);
        this.$set(this.ruleForm, "category_1", Number(arr[0]));
        this.$set(this.ruleForm, "category_2", Number(arr[1]));
      }
      if (this.ruleForm.businessLicensePhoto) {
        this.getImgInfo(
          this.ruleForm.businessLicensePhoto,
          "businessLicensePhoto"
        );
      }

      if (this.ruleForm.cardPhotoNegative) {
        this.getImgInfo(this.ruleForm.cardPhotoNegative, "cardPhotoNegative");
      }
      if (this.ruleForm.cardPhotoPositive) {
        this.getImgInfo(this.ruleForm.cardPhotoPositive, "cardPhotoPositive");
      }
    }
    // 商户类型
    this.$http
      .get("dictdata/getByDictType?dictType=member_type")
      .then((res) => {
        if (res.code === "0000") {
          this.companyTypeList = res.data;
        }
      });
    // 省
    this.$http.get("area/getByLevel?level=1").then((res) => {
      if (res.code === "0000") {
        this.provList = res.data;
      }
    });

    // 经营范围
    this.$http
      .get("dictdata/getByDictTypeAndPid?dictType=business_type&parentId=0")
      .then((res) => {
        if (res.code === "0000") {
          this.categoryList1 = res.data;
        }
      });

    // 法人证件类型
    this.$http
      .get("dictdata/getByDictType?dictType=legal_cert_type")
      .then((res) => {
        if (res.code === "0000") {
          this.legalCertTypeList = res.data;
          //console.log(res.data);
        }
      });
  },
  methods: {
    getToken,
    getUserInfo,
    testPersonName(rule, value, callback) {
      if (isPerson(value)) {
        callback();
      } else {
        callback(new Error("格式有误"));
      }
    },
    testComName(rule, value, callback) {
      if (isCompanyName(value)) {
        callback();
      } else {
        callback(new Error("格式有误"));
      }
    },
    clearId() {
      //改变证件类型，证件号清空
      // this.ruleForm.legalCertId = "";
      this.$set(this.ruleForm, "legalCertId", "");
      setTimeout(() => {
        this.$refs["createForm"].clearValidate(["legalCertId"]);
      }, 0);
    },
    checkEmail(rule, value, callback) {
      if (isEmail(value)) {
        callback();
      } else {
        callback(new Error("请输入有效的邮箱地址"));
      }
    },
    checkPhone(rule, value, callback) {
      if (isMobile(value)) {
        callback();
      } else {
        callback(new Error("请输入有效的手机号码"));
      }
    },
    checkIdCard(rule, value, callback) {
      if (this.ruleForm.legalCertType == "1") {
        //身份证
        if (isIdCard(value)) {
          callback();
        } else {
          callback(new Error("请输入合法的证件号码"));
        }
      } else {
        callback();
      }
    },
    longDateChange(val, prop) {
      this[`${prop}End`] = this.ruleForm[prop][1];
      if (val) {
        
        this.$set(this.ruleForm, prop, [this.ruleForm[prop][0], "2099-12-31"]);
      } else {
        this.$set(this.ruleForm, prop, [
          this.ruleForm[prop][0],
          this[`${prop}End`],
        ]);
      }
    },
    handleRemove(file, prop) {
      this[prop] = [];
      this.ruleForm[prop] = "";
    },
    beforeUpload(file) {
      const is2M = file.size / 1024 / 1024 < 2;
      const type = ["image/jpg", "image/png", "image/jpeg"].includes(file.type);

      if (!type) {
        this.$message.warning("上传图片只支持jpg、png格式");
        return false;
      }
      if (!is2M) {
        this.$message.warning("上传图片大小不能超过2M");
        return false;
      }
      return true;
    },
    handleCategory(val) {
      if (this.ruleForm.category_2) this.ruleForm.category_2 = "";
      this.getSecondCate(val);
    },
    // 获取二级经营范围
    getSecondCate(val) {
      this.$http
        .get(
          `dictdata/getByDictTypeAndPid?dictType=business_type&parentId=${val}`
        )
        .then((res) => {
          if (res.code === "0000") {
            this.categoryList2 = res.data;
          }
        });
    },
    handleCategory1(val) {
      this.$set(this.ruleForm, this.ruleForm.category_2, val);
    },
    // 省
    handleProv(val) {
      this.$set(this.ruleForm, "areaCode", "");
      this.$set(this.ruleForm, "cityCode", "");
      setTimeout(() => {
        this.$refs.createForm.clearValidate(["areaCode", "cityCode"]);
      }, 0);
      // this.ruleForm.cityCode = undefined;
      // this.ruleForm.areaCode = undefined;
      this.getCityList(val, "cityList");
    },
    // 获取市
    getCityList(val, prop) {
      this.$http.get(`area/getByParentCode?parentCode=${val}`).then((res) => {
        if (res.code === "0000") {
          this["areaList"] = [];
          this[prop] = res.data.map((item) => item);
        }
      });
    },
    getImgInfo(id, prop) {
      this.$http.get(`/oss/get?id=${id}`).then((res) => {
        this[prop] = [
          {
            name: res.name,
            url: window.location.origin + `/merchantApi/oss/view?id=${id}`,
          },
        ];
        //console.log(this[prop]);
      });
    },
    // 市
    handleCity(val) {
      this.$set(this.ruleForm, "areaCode", "");
      // this.ruleForm.areaCode = undefined;
      this.getCityList(val, "areaList");
    },
    handleArea(val) {
      this.$set(this.ruleForm, this.ruleForm.areaCode, val);
    },
    // checkDate(rule,value,callback) {
    //     const prop = rule.field
    //     const obj = {
    //         businessDate: {
    //             text: '请选择营业执照有效期',
    //             prop2: 'businessIsLong'
    //         },
    //         legalCertDate: {
    //             text: '请选择法人证件有效期',
    //             prop2: 'legalCertIdLong'
    //         },
    //     }
    //     const prop2 = obj[prop].prop2
    //     if (this.ruleForm[prop] || this.ruleForm[prop2]) {
    //         callback()
    //     } else {
    //         callback(new Error(obj[prop].text))
    //     }
    // },
    checkFile(rule, value, callback) {
      const prop = rule.field;
      if (this.ruleForm[prop]) {
        callback();
      } else {
        callback(new Error("请上传照片"));
      }
    },
    handleSuccess(res, file, prop) {
      // console.log(file, '---');
      if (res.code === "0000") {
        this[prop] = [file];
        this.ruleForm[prop] = res.data.id;
        this.$nextTick(() => {
          this.$refs.createForm.clearValidate();
        });
        // this.$refs.createForm.validate()
      } else {
        this[prop] = [];
        this.$message.error("上传失败，请稍后再试！");
      }
    },
    handleFinish(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          // 营业执照不是长期有效
          // if (!this.ruleForm.businessIsLong) {
          this.ruleForm.businessStartDate = this.ruleForm.businessDate[0];
          this.ruleForm.businessExpires = this.ruleForm.businessDate[1];
          // }
          // 法人证件信息不是长期有效
          // if (!this.ruleForm.legalCertIdLong) {
          this.ruleForm.legalCertIdStart = this.ruleForm.legalCertDate[0];
          this.ruleForm.legalCertIdExpires = this.ruleForm.legalCertDate[1];
          // }
          if (this.ruleForm.category_1) {
            this.ruleForm.businessScope = [
              this.ruleForm.category_1 || "",
              this.ruleForm.category_2 || "",
            ].join(",");
          }
          // 编辑
          if (this.ruleForm.id) {
            this.$http
              .put("/api/merchant/memberinfo/edit", this.ruleForm)
              .then((res) => {
                // this.refreshCurrentUser();
                if (res.code == "0000") {
                  this.$message.success("信息完善成功！");
                  // this.$emit("changeInfo");
                  this.refreshCurrentUser();
                  this.handleClose();
                }
              });
          } else {
            this.$http
              .post("/api/merchant/memberinfo/add", this.ruleForm)
              .then((res) => {
                // this.refreshCurrentUser();
                if (res.code == "0000") {
                  this.$message.success("信息完善成功！");
                  this.refreshCurrentUser();
                  // this.handleClose();
                  // this.$emit("changeInfo");
                }
              });
          }
        }
      });
    },
    nextFn(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.pageNum = 2;
          this.$nextTick(() => {
            this.$refs[form].clearValidate();
          });
          this.rules = {
            memberType: [
              { required: true, message: "请选择公司类型", trigger: "change" },
            ],
            memberName: [
              { required: true, message: "请输入公司名称", trigger: "change" },
              { max: 60, message: "最大长度60字符", trigger: "change" },
              {
                validator: this.testComName,
                trigger: "change",
              },
              {
                pattern: /^(?!\s+).*(?<!\s)$/,
                message: "格式有误",
                trigger: "change",
              },
            ],
            memberShortName: [
              { required: true, message: "请输入公司简称", trigger: "change" },
              { max: 30, message: "最大长度30字符", trigger: "change" },
              {
                validator: this.testComName,
                trigger: "change",
              },
              {
                pattern: /^(?!\s+).*(?<!\s)$/,
                message: "格式有误",
                trigger: "change",
              },
            ],
            category_1: [
              { required: true, message: "请选择经营范围", trigger: "change" },
            ],
            category_2: [
              { required: true, message: "请选择经营范围", trigger: "change" },
            ],
            registerAddress: [
              { required: true, message: "请输入注册地址", trigger: "change" },
              { max: 60, message: "最大长度60字符", trigger: "change" },
              {
                validator: this.testComName,
                trigger: "change",
              },
              {
                pattern: /^(?!\s+).*(?<!\s)$/,
                message: "格式有误",
                trigger: "change",
              },
            ],
            address: [
              { required: true, message: "请输入联系地址", trigger: "change" },
              { max: 60, message: "最大长度60字符", trigger: "change" },
              {
                validator: this.testComName,
                trigger: "change",
              },
              {
                pattern: /^(?!\s+).*(?<!\s)$/,
                message: "格式有误",
                trigger: "change",
              },
            ],
            provCode: [
              { required: true, message: "请选择所在省份", trigger: "change" },
            ],
            cityCode: [
              { required: false, message: "请选择所在市区", trigger: "change" },
            ],
            areaCode: [
              { required: false, message: "请选择所在地区", trigger: "change" },
            ],
            businessCode: [
              {
                required: true,
                message: "请输入营业执照编码",
                trigger: "change",
              },
              { max: 45, message: "最大长度45字符", trigger: "change" },
              {
                validator: this.testComName,
                trigger: "change",
              },
              {
                pattern: /^(?!\s+).*(?<!\s)$/,
                message: "格式有误",
                trigger: "change",
              },
            ],
            businessDate: [
              {
                required: true,
                message: "请选择营业执照有效期",
                trigger: "change",
              },
            ],
            businessLicensePhoto: [
              { required: true, validator: this.checkFile },
            ],

            legalPerson: [
              { required: true, message: "请输入法人姓名", trigger: "change" },
              { max: 10, message: "最大长度10字符", trigger: "change" },
              {
                validator: this.testPersonName,
                trigger: "change",
              },
              {
                pattern: /^(?!\s+).*(?<!\s)$/,
                message: "格式有误",
                trigger: "change",
              },
            ],
            legalCertType: [
              {
                required: true,
                message: "请选择法人证件信息",
                trigger: "change",
              },
            ],
            legalCertId: [
              {
                required: true,
                message: "请输入法人证件号码",
                trigger: "change",
              },
              { validator: this.checkIdCard, trigger: "change" },
            ],
            legalCertDate: [
              {
                required: true,
                message: "请选择法人证件有效期",
                trigger: "change",
              },
            ],
            legalTel: [
              {
                required: true,
                message: "请输入法人手机号",
                trigger: "change",
              },
              { validator: this.checkPhone, trigger: "change" },
            ],
            memberContact: [
              { required: true, message: "请输入联系人", trigger: "change" },
              { max: 25, message: "最大长度25字符", trigger: "change" },
              {
                validator: this.testPersonName,
                trigger: "change",
              },
              {
                pattern: /^(?!\s+).*(?<!\s)$/,
                message: "格式有误",
                trigger: "change",
              },
            ],
            memberContactTel: [
              {
                required: true,
                message: "请输入联系人电话",
                trigger: "change",
              },
              { validator: this.checkPhone, trigger: "change" },
            ],
            contactEmail: [
              {
                required: true,
                message: "请输入联系人邮箱",
                trigger: "change",
              },
              { validator: this.checkEmail, trigger: "change" },
            ],
            cardPhotoPositive: [{ required: true, validator: this.checkFile }],
            cardPhotoNegative: [{ required: true, validator: this.checkFile }],
          };
        }
      });
    },
    upFn() {
      this.rules = {
        memberType: [
          { required: true, message: "请选择公司类型", trigger: "change" },
        ],
        memberName: [
          { required: true, message: "请输入公司名称", trigger: "change" },
          { max: 60, message: "最大长度60字符", trigger: "change" },
          {
            validator: this.testComName,
            trigger: "change",
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        memberShortName: [
          { required: true, message: "请输入公司简称", trigger: "change" },
          { max: 30, message: "最大长度30字符", trigger: "change" },
          {
            validator: this.testComName,
            trigger: "change",
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        category_1: [
          { required: true, message: "请选择经营范围", trigger: "change" },
        ],
        category_2: [
          { required: true, message: "请选择经营范围", trigger: "change" },
        ],
        registerAddress: [
          { required: true, message: "请输入注册地址", trigger: "change" },
          { max: 60, message: "最大长度60字符", trigger: "change" },
          {
            validator: this.testComName,
            trigger: "change",
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        address: [
          { required: true, message: "请输入联系地址", trigger: "change" },
          { max: 60, message: "最大长度60字符", trigger: "change" },
          {
            validator: this.testComName,
            trigger: "change",
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        provCode: [
          { required: true, message: "请选择所在省份", trigger: "change" },
        ],
        cityCode: [
          { required: false, message: "请选择所在市区", trigger: "change" },
        ],
        areaCode: [
          { required: false, message: "请选择所在地区", trigger: "change" },
        ],
        businessCode: [
          {
            required: true,
            message: "请输入营业执照编码",
            trigger: "change",
          },
          { max: 45, message: "最大长度45字符", trigger: "change" },
          {
            validator: this.testComName,
            trigger: "change",
          },
          {
            pattern: /^(?!\s+).*(?<!\s)$/,
            message: "格式有误",
            trigger: "change",
          },
        ],
        businessDate: [
          {
            required: true,
            message: "请选择营业执照有效期",
            trigger: "change",
          },
        ],
        businessLicensePhoto: [{ required: true, validator: this.checkFile }],
      };
      this.pageNum = 1;
    },
    handleClose() {
      this.$emit("update:dialogVisible", false);
    },
    refreshCurrentUser() {
      this.$http.post("/sys/user/refreshCurrentUser").then((res) => {
        if (res.code === "0000") {
          setUserInfo({ ...res.data });

          this.$emit("changeInfo1");
          this.handleClose();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;

  .left {
    width: 400px;
    background: #f9f9f9;
    text-align: right;
    color: #bfbfbf;
    font-weight: 400;
    padding-right: 50px;
    line-height: 22px;
    border-radius: 20px 0 0 20px;
    .s_title {
      font-size: 16px;
      font-weight: 500;
      color: #666666;
      line-height: 36px;
    }
    .first {
      margin-top: 150px;
    }
    .second {
      margin-top: 164px;
      margin-bottom: 196px;
    }
    .fourth {
      margin-top: 140px;
      margin-bottom: 200px;
    }
  }
  .right {
    flex: 1;
    min-height: 600px;
    padding-left: 60px;
    padding-bottom: 40px;
    .line {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f0f0f0;
      height: 4px;
      margin-bottom: 40px;
      div {
        height: 6px;
        background: #03bfc6;
        border-radius: 5px 0px 0px 5px;
        width: 110px;
        &:first-child {
          width: 80px;
          border-radius: 5px;
        }
      }
    }
    .title {
      font-size: 22px;
      font-weight: 600;
      color: #1d1c1c;
      margin-top: 40px;
      margin-bottom: 5px;
    }
    .hint {
      color: #666;
      font-size: 16px;
      font-weight: 400;
      margin-bottom: 10px;
    }
    .s_hint {
      text-align: right;
      font-size: 12px;
      color: #bfbfbf;
      margin-bottom: 5px;
      padding-right: 20px;
    }
    .input_ {
      :deep(.el-input__inner) {
        width: 512px;
      }
    }
    .upload2 {
      :deep(.el-upload-dragger) {
        width: 348px;
      }
      :deep(.el-upload-list) {
        width: 348px;
      }
    }
  }
}
:deep(.el-dialog) {
  border-radius: 20px;
  .el-dialog__header,
  .el-dialog__body {
    padding: 0;
  }
}
:deep(.el-upload-dragger) {
  width: 512px;
  height: 120px;
  background: #fafafa;
  .el-icon-upload {
    font-size: 30px;
    margin: 0;
  }
  .el-upload__text2 {
    font-size: 18px;
    font-weight: 400;
  }
  .el-upload__tip2 {
    font-size: 12px;
    color: #bfbfbf;
    line-height: 20px;
  }
}

:deep(.el-upload-list) {
  width: 512px;
}
</style>
